<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1160px'
    },
    height: {
      type: String,
      default: '390px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(list = []) {
      let series = []
      series = list.map(i => ({
        name: i.netIp,
        itemStyle: {
          normal: {
            // color: '#FF005A',
            lineStyle: {
              // color: '#FF005A',
              width: 2
            }
          }
        },
        smooth: false,
        type: 'line',
        data: i.nums,
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }))
      if (list.length == 0) {
        this.chart.setOption({})
        return false
      }
      this.chart.setOption({
        xAxis: {
          data: list.length > 0 ? list[0].times : [],
          type: "category",
          name: "时间线",
          // min: function (value) {
          // //console.log(value,'value');
          //   return value.min - 20;
          // },
          min: -1,
          nameLocation: 'center',
          nameGap: 26,
          boundaryGap: true,
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          axisPointer: {
            // show:false
            type: "none"
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            // start: 65,
            // end: 85
          },
          // {
          //   show: true,
          //   type: 'inside',
          //   realtime: true,
          //   bottom: 10,
          //   // xAxisIndex: [0,1,2]
          // },
          // {
          //   // show: true,
          //   type: 'slider',
          //   realtime: true,
          //   bottom: 10
          // }
        ],
        grid: {
          left: 15,
          right: 140,
          bottom: list.length > 0 ? 65 : 80,
          top: 30,
          containLabel: true
        },
        tooltip: {
          show: true,
          // trigger: 'axis',
          // axisPointer: {
          //   type: 'cross'
          // },
          // padding: [5, 10]
        },
        yAxis: {
          name: '在线设备数',
          nameLocation: "end",
          nameTextStyle: {
            align: 'center',
            padding: [0, 0, 0, 35]
            // rich: {
            //   a: {
            //     // 没有设置 `align`，则 `align` 为 right
            //   }
            // }
          },
          // boundaryGap: true,
          axisTick: {
            show: true,
            // alignWithLabel:true,
            interval: 2,
            inside: true,
            length: 5,
          },
          axisLine: {
            show: true,
            // symbol:['none', 'arrow']
          },
          axisPointer: {
            // show:false
            type: "none"
          }

        },
        legend: {
          type: 'scroll',
          show: true,
          orient: 'vertical',
          // right: '0',
          left: '1030',
          top: 55,
          // data: ['expected', 'actual']
        },
        toolbox: {
          show: true,
          showTitle: true,
          orient: "vertical",
          feature: {
            saveAsImage: {
              type: 'png',
              name: 'FSU-VPN监控图'
            }
          },
          left: 1034,
          top: 25,
        },
        series: series,
        // series: [{
        //   name: list[0].deviceIp,
        //   itemStyle: {
        //     normal: {
        //       color: '#FF005A',
        //       lineStyle: {
        //         color: '#FF005A',
        //         width: 2
        //       }
        //     }
        //   },
        //   smooth: false,
        //   type: 'line',
        //   data: list[0].nums,
        //   animationDuration: 2800,
        //   animationEasing: 'cubicInOut'
        // },
        // {
        //   name: list[1].deviceIp,
        //   smooth: false,
        //   type: 'line',
        //   itemStyle: {
        //     normal: {
        //       color: '#3888fa',
        //       lineStyle: {
        //         color: '#3888fa',
        //         width: 2
        //       },
        //       // areaStyle: {
        //       //   color: '#f3f8ff'
        //       // }
        //     }
        //   },
        //   data: list[1].nums,
        //   animationDuration: 2800,
        //   // animationEasing: 'quadraticOut'
        //   animationEasing: 'cubicInOut'
        // }]
      }, true)
    }
  }
}
</script>
